<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/customize.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left font-black"></a>
			<h1 class="mui-title">大棚信息</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded" id="container">
				<div id="list"></div>

				<button class="mui-btn mui-btn-green mui-btn-block" id="add" style="margin-top: 10px">
					添加
				</button>
			</div>
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/request.js"></script>
		<script src="../js/storage.js"></script>
		<script type="text/javascript">
			// 生命全局变量
			let baseUrl = localStorage.getItem("ip");
			//获取当前登录用户
			let user = userCache.getUser();

			mui.init();

			mui.plusReady(function() {
				loadlist();
			});

			window.addEventListener("refresh", function(event) {
				loadlist();
			});

			mui("body").on("tap", "#add", function(event) {
				mui.openWindow({
					url: "greenhouseAdd.html",
					id: "greenhouseAdd.html",
					createNew: false,
					show: {
						autoShow: true,
					},
				});
			});

			//获取大棚列表
			function loadlist() {
				let data = {};
				request.get(
					"/system/greenhouse/list",
					data,
					(data) => {
						//提交成功回调
						console.log("调用服务端获取大棚信息成功");
						let list = data.rows;
						renderList(list);
						//关闭等待框
						plus.nativeUI.closeWaiting();
						//显示当前页面
						mui.currentWebview.show();
					},
					(error, thrown) => {
						//发生错误时，回调
						console.error("调用服务端获取大棚信息失败", error);
					}
				);
			}

			//动态添加列表
			function renderList(list) {
				if (!list) {
					return;
				}
				let parent = document.getElementById("list");
				parent.innerHTML = "";
				list.forEach((row) => {
					let li = document.createElement("div");
					li.addEventListener("tap", function(event) {
						getGreenhouseDetail(row.id);
					});
					// li.innerHTML = `<a href="javascript:;" class="mui-navigate-right">
					// 			<img class="mui-media-object mui-pull-left" src="${row.picture?(baseUrl+row.picture):'../image/logo.png'}">
					// 			<div class="mui-media-body">
					// 				${row.name}
					// 				<p class="mui-ellipsis">位置：${row.location}</p>
					// 			</div>
					// 		</a>`;
					li.innerHTML = `<div class="card-item">
					 <img src="${row.picture? baseUrl.replace(/\/$/, "") + "/" + row.picture.replace(/^\//, ""): "../image/logo.png"}" 
					 alt="" class="card-item-image">
						<div class="card-item-info">
							<h2 class="card-item-info-title">${row.name}</h2>
							<div class="address-section">
								<p class="card-item-info-subtitle">${row.location}</p>
								<span class="mui-icon mui-icon-arrowright arrow-icon"></span>
							</div>
						</div>
					</div>`;
					parent.append(li);
				});
			}
			//显示大棚信息
			function getGreenhouseDetail(id) {
				mui.openWindow({
					url: "greenhouseAdd.html",
					id: "greenhouseAdd.html",
					createNew: false,
					show: {
						autoShow: true,
					},
					extras: {
						greenhouseId: id,
					},
				});
			}
		</script>
	</body>

</html>